<template>
  <div class="leavemsg_node_edit">
    <div class="btn_box">
      <el-button type="primary" class="primary_btn" @click="saveEdit">{{$t('public.save')}}</el-button>
      <!--<el-button v-show="nodeObj._id && showDeleteBtn" type="primary" class="primary_btn delete_btn" @click="deleteLi">{{$t('public.delete')}}</el-button>-->
    </div>
    <el-form :model="nodeObj" label-width="100px" ref="nodeObj" :rules="rules">
      <el-form-item class="form_li"  prop="name"  :label="$t('configLazyLoad.process.nodeName')">
        <el-input :maxlength="30"  v-model.trim="nodeObj.name" class="input_box node_name"></el-input>
      </el-form-item>
    </el-form>
    <affix class="leave_msg_node" :label="$t('configLazyLoad.process.processLabel110')">
      <div class="leave_msg_show">
        <div class="head"></div>
        <div class="body">
          <el-form :model="nodeObj" ref="nodeObjTwo" label-position="top" >
            <el-form-item prop="title" :label="$t('configLazyLoad.process.processLabel114')" :rules="{ required: true, message: this.$t('configLazyLoad.process.processLabel111'), trigger: 'blur' }">
              <el-input v-model.trim="nodeObj.title" :autofocus="true"></el-input>
            </el-form-item>
            <el-form-item prop="contentTip"  :label="$t('configLazyLoad.process.processLabel113')" :rules="{required: true, message: this.$t('configLazyLoad.process.processLabel112'), trigger: 'blur'}">
              <el-input type="textarea" v-model="nodeObj.contentTip"></el-input>
            </el-form-item>
            <div class="leavemsg_field_box">
              <!--<div v-for="mField in mustFields" class="leavemsg_must_box leavemsg_field_box_li">-->
                <!--<el-input disabled class="leavemsg_field_li" :maxlength="6" v-model="mField.name" :autofocus="true" placeholder="请输入自定义名称字段"></el-input>-->
                <!--<div class="leavemsg_field_todo">-->
                  <!--<el-checkbox v-model="mField.enable" @change="fieldEnableChange(mField)" >启用</el-checkbox>-->
                  <!--<el-checkbox v-model="mField.required" >必填</el-checkbox>-->
                <!--</div>-->
              <!--</div>-->
              <div v-for="(field, index) in nodeObj.leavemsgFields" class="leavemsg_cust_box leavemsg_field_box_li">
                <el-input :disabled="field._id === 'phone' || field._id === 'email'" class="leavemsg_field_li" :maxlength="10" v-model.trim="field.name" :autofocus="true" :placeholder="$t('configLazyLoad.process.processLabel115')"></el-input>
                <div class="leavemsg_field_todo">
                  <span v-if="field._id !== 'phone' && field._id !== 'email'" class="iconfont icon-shanchu" @click="deleteFieldChange(index)"></span>
                  <el-checkbox style="margin-right: 0px" v-model="field.enable" @change="fieldEnableChange(field)" >{{$t('configLazyLoad.public.reuse')}}</el-checkbox>
                  <el-checkbox v-model="field.required">{{$t('validate.required')}}</el-checkbox>
                </div>
              </div>
            </div>
          </el-form>
        <div class="add_filed_btn" @click="addFiled">{{$t('configLazyLoad.webimClient.addFields')}}</div>
        <div class="prompt_text">{{$t('configLazyLoad.process.processLabel116')}}</div>
        </div>
      </div>
    </affix>
    <affix class="wx_leave_node" :label="$t('configLazyLoad.process.processLabel117')">
      <el-form :model="nodeObj" label-width="100px">
        <el-form-item class="form_li"  prop="wxLeadText"  :label="$t('configLazyLoad.process.processLabel118')">
          <el-input  type="textarea"  v-model="nodeObj.wxLeadText" class="input_box node_name"></el-input>
        </el-form-item>
        <el-form-item class="form_li"  prop="wxToPeer"  :label="$t('configLazyLoad.process.processLabel119')">
          <el-select v-model="nodeObj.wxToPeer" :placeholder="$t('webchat.placeSkillsGrouop')">
            <el-option
                    v-for="item in peerOptions"
                    :key="item._id"
                    :label="item.DisplayName"
                    :value="item.Exten">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </affix>
  </div>
</template>
<script>
  import affix from '@/components/ui-modules/affix/Affix.vue'
  import * as types from '@modules/config/channelConfig/webchatSchdule/mutation-types.js'
  import { deepClone } from '@utils/m7Utils.js'
  export default{
    name: 'leaveMsgNodeEdit',
    data () {
      return {
        peerOptions: [],
        contentShow: false,
        optionsOne: [],
        rules: {
          name: [
            { required: true, message: this.$t('configLazyLoad.process.processLabel7'), trigger: 'blur' }
          ]
        },
        rulesTwo: {
          title: [
            { required: true, message: this.$t('configLazyLoad.process.processLabel111'), trigger: 'blur' }
          ],
          contentTip: [
            { required: true, message: this.$t('configLazyLoad.process.processLabel112'), trigger: 'blur' }
          ]
        },
        nodeObj: {
          _id: '', // id
          account: '', // 账户id
          type: 'leavemsg', // 节点类型
          name: '', // 名称
          title: '', // 留言标题
          contentTip: '', // 留言框默认填写内容
          createTime: '', // 创建时间
          createUser: '', // 创建人
          updateTime: '', // 修改时间
          updateUser: '', // 修改人
          nextNodeIds: [''], // 流转节点id数组
          wxLeadText: '',   // 微信端留言节点设置  留言引导文案
          wxToPeer: '',     // 微信端留言节点设置  流转技能组
          leavemsgFields: [
            {
              _id: 'phone', // 自定义字段id
              name: this.$t('public.email'), // 自定义字段名称
              enable: true, // 是否启用
              required: false // 是否必填
            },
            {
              _id: 'email', // 自定义字段id
              name: this.$t('public.phoneNum'), // 自定义字段名称
              enable: true, // 是否启用
              required: false // 是否必填
            }
          ]
        }
      }
    },
    props: {
      showDeleteBtn: {
        type: Boolean,
        default: true
      },
      dataId: String,
      random: Number,
      todoType: String
    },
    watch: {
      random () {
        this.resetForm()
        this.initData()
      }
    },
    computed: {
      enableLength () {
        let length = 0
        this.nodeObj.leavemsgFields.forEach((item) => {
          if (item.enable) {
            length += 1
          }
        })
        return length
      }
    },
    methods: {
      initData () {
        this.$store.dispatch('getCache', { type: 'mailQueues' }).then(req => {
          let mailQueues = this.$getCache('mailQueues')
          if (!mailQueues || mailQueues.length === 0) {
            return
          }
          this.peerOptions = mailQueues || []
        })
        if (this.dataId) {
          let data = {
            _id: this.dataId
          }
          this.$store.dispatch('getNodeById', data).then((res) => {
            if (res.success) {
              this.$nextTick(() => {
                this.nodeObj = deepClone(res.data)
              })
            }
          })
        } else {
          this.nodeObj = {
            _id: '', // id
            account: '', // 账户id
            type: 'leavemsg', // 节点类型
            name: '', // 名称
            title: '', // 留言标题
            contentTip: '', // 留言框默认填写内容
            createTime: '', // 创建时间
            createUser: '', // 创建人
            updateTime: '', // 修改时间
            updateUser: '', // 修改人
            nextNodeIds: [''], // 流转节点id数组
            wxLeadText: '',   // 微信端留言节点设置  留言引导文案
            wxToPeer: '',     // 微信端留言节点设置  流转技能组
            leavemsgFields: [
              {
                _id: 'phone', // 自定义字段id
                name: this.$t('public.email'), // 自定义字段名称
                enable: true, // 是否启用
                required: false // 是否必填
              },
              {
                _id: 'email', // 自定义字段id
                name: this.$t('public.phoneNum'), // 自定义字段名称
                enable: true, // 是否启用
                required: false // 是否必填
              }
            ]
          }
        }
      },
      deleteFieldChange (index) {
        this.nodeObj.leavemsgFields.splice(index, 1)
      },
      resetForm () {
        this.$refs['nodeObj'].resetFields()
        this.$refs['nodeObjTwo'].resetFields()
      },
      fieldEnableChange (data) {
        if (this.enableLength > 10) {
          this.$message.error(this.$t('configLazyLoad.process.processLabel120'))
          data.enable = false
        }
      },
      addFiled () {
        if (this.nodeObj.leavemsgFields.length >= 10) {
          this.$message.error(this.$t('configLazyLoad.process.processLabel121'))
          return
        }
        this.nodeObj.leavemsgFields.push({
          _id: '',
          name: '',
          enable: false,
          required: false
        })
      },
      titleShowFun (event, data) {
      },
      saveEdit () {
        let that = this
        this.$refs['nodeObj'].validate((valid) => {
          if (valid) {
            this.$refs['nodeObjTwo'].validate((validTwo) => {
              if (validTwo) {
                let flag = false
                that.nodeObj.leavemsgFields.forEach((item) => {
                  if (!item.name) {
                    flag = true
                  }
                })
                if (flag) {
                  this.$message.error(this.$t('configLazyLoad.process.processLabel122'))
                  return
                }
                if (that.todoType === 'add') {
                  that.$store.dispatch('addNode', that.nodeObj).then((res) => {
                    if (res.success) {
                      that.$store.commit(types.ADD_WEBCHAT_SCHDULE_LIST_NODE, {node: 'leavemsgNode', data: that.nodeObj})
                      that.$message.success(this.$t('config.customer.addSucc'))
                      that.$emit('back')
                    }
                  })
                } else {
                  that.$store.dispatch('updateNode', that.nodeObj).then((res) => {
                    if (res.success) {
                      that.$store.commit(types.UPDATE_WEBCHAT_SCHDULE_LIST_NODE, {node: 'leavemsgNode', data: that.nodeObj})
                      that.$message.success(this.$t('configLazyLoad.public.editSuccess'))
                      that.$emit('back')
                    }
                  })
                }
              }
            })
          }
        })
      }
    },
    components: {
      affix
    },
    beforeMount () {
      this.initData()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../../../assets/common.styl"
  .btn_box
    text-align right
    margin-bottom 10px
  .delete_btn
    background-color $c-pink
    border-color $c-pink
  .leavemsg_node_edit
    padding 10px
  .node_name
    width 400px
  .border_dashed
    border 1px dashed #ccc
    cursor pointer
  .leave_msg_show
    width 300px
    box-shadow 0 0 10px #888
    .head
      background #18CAA6
      height 50px
    .body
      background #F9F9F9
      padding 16px
      .leave_msg_title
        line-height 20px
        height 20px
        margin-bottom 6px
      .leave_msg_content
        height 60px
  .prompit
    color $c-prompt
    padding 6px 0 12px
  .ui-affix
    padding 18px 20px 0 20px
  .leavemsg_field_box_li
    margin 5px 0
    position relative
    height 36px
    line-height 36px
    &:hover
      background #e6e6e6
      .leavemsg_field_todo
        display block
    .leavemsg_field_li
      width 50%
  .icon-fasongchenggong
    color $c-main
  .icon-shanchu
    color $c-pink
  .leavemsg_field_todo
    display none
    position absolute
    background #e6e6e6
    height 100%
    line-height 36px
    width 160px
    left 50%
    float right
    top 0
    .iconfont
      display inline-block
      margin 0 10px
      cursor pointer
  .leavemsg_must_box
    .leavemsg_field_todo
      padding-left 10px
      box-sizing border-box
  .add_filed_btn
    cursor pointer
    border 1px dashed #ccc
    height 20px
    line-height 20px
    text-align center
    width 50%
  .prompt_text
    color #777
  .form_li
    margin-bottom 20px
  .leavemsg_field_todo
    .el-checkbox + .el-checkbox
      margin-left 14px
  .wx_leave_node
    margin-top 30px
  .leave_msg_node
    padding-left 30px
</style>
